<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>使用 DOM 导航 HTML 文档</title>
</head>
<body>
<h1 id="heading">My Heading</h1>
<p id="paragraph">This is some text in a paragraph</p>

<script>
    var htmlElement;
    var headElement;
    var bodyElemnt;
    var h1Element;
    var pElement;

    htmlElement = document.documentElement;
    headElement = htmlElement.firstChild;
    alert(headElement.tagName);

    if (headElement.nextSibling.nodeType == 3) {
        bodyElemnt = headElement.nextSibling.nextSibling;
    } else {
        bodyElemnt = headElement.nextSibling;
    }
    alert(bodyElemnt.tagName);

    if (bodyElemnt.firstChild.nodeType == 3) {
        h1Element = bodyElemnt.firstChild.nextSibling;
    } else {
        h1Element = bodyElemnt.firstChild;
    }
    alert(h1Element.tagName);
    h1Element.style.fontFamily = 'Arial';

    if (h1Element.nextSibling.nodeType == 3) {
        pElement = h1Element.nextSibling.nextSibling;
    } else {
        pElement = h1Element.nextSibling;
    }
    alert(pElement.tagName);
    pElement.style.fontFamily = 'Arial';

    if (pElement.previousSibling.nodeType == 3) {
        h1Element = pElement.previousSibling.previousSibling;
    } else {
        h1Element = pElement.previousSibling;
    }
    h1Element.style.fontFamily = 'Courier';
</script>
</body>
</html>